@use '@scss/common.scss' as *;

.dropdownMenu {
  all: unset;
  display: flex;
  position: relative;
  cursor: pointer;
  border-radius: 3px;

  &:focus-visible {
    @include outline;
  }
}

.show {
  &:local() {
    .threeDots {
      color: var(--theme-text);
    }
  }
}

.threeDots {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.5rem;
  color: var(--theme-elevation-500);

  &:hover {
    color: var(--theme-text);
  }

  & > div {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
  }
}
